<template>
	<view class="body">
		<view class="without" v-show="without">暂无优惠券可以使用~~</view>
		<view class="content" v-for="(item, index) in discountList" :key="index" v-show="pending">
			<view class="bgc"><image src="../../static/img/discount/discount.png" mode=""></image></view>
			<view class="discount">
				<view class="couponMoeny">
					<text class="money">￥</text>
					{{ item.couponMoeny }}
				</view>
				<view class="particulars">
					<view class="">{{ item.couponMoeny }}元乘车优惠券</view>
					<view class="minUseMoney">订单满{{ item.minUseMoney }}元可用</view>
					<view class="minUseMoney">有效期:{{ expiredTime[0] }}前有效</view>
				</view>
			</view>
		</view>
		<!-- 过期 -->
		<view class="content" v-for="(item, index) in haveBeen" :key="index" v-show="haveBeenUsed">
			<view class="bgc"><image src="../../static/img/discount/pastDue.png" mode=""></image></view>
			<view class="overdue">
				<view class="couponMoeny">
					<text class="money">￥</text>
					{{ item.couponMoeny }}
				</view>
				<view class="particulars">
					<view class="">{{ item.couponMoeny }}元乘车优惠券</view>
					<view class="minUseMoney">订单满{{ item.minUseMoney }}元可用</view>
					<view class="minUseMoney">有效期:{{ expiredTime[0] }}前有效</view>
				</view>
			</view>
		</view>
		<!-- 已使用 -->
		<view class="content" v-for="(item, index) in overdue" :key="index" v-show="pastDue">
			<view class="bgc"><image src="../../static/img/discount/couponsF.png" mode=""></image></view>
			<view class="overdue">
				<view class="couponMoeny">
					<text class="money">￥</text>
					{{ item.couponMoeny }}
				</view>
				<view class="particulars">
					<view class="">{{ item.couponMoeny }}元乘车优惠券</view>
					<view class="minUseMoney">订单满{{ item.minUseMoney }}元可用</view>
					<view class="minUseMoney">有效期:{{ expiredTime[0] }}前有效</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import utils from '@/static/common/utils.js';
import value from '@/static/value/value.js';
export default {
	data() {
		return {
			discountList: [],
			expiredTime: '',
			haveBeen: [],
			overdue: [],
			pending: false,
			haveBeenUsed: false,
			pastDue: false,
			without: false
		};
	},
	onLoad() {
		this.getDiscount();
		if (this.discountList == '' && this.haveBeen == '' && this.overdue == '') {
			this.without = true;
		}
	},
	methods: {
		getDiscount() {
			const that = this;
			let obj = {
				ticks: utils.utils.GetTicks(),
				channel: this.$tokenObj.obj.channel
			};
			obj.sign = utils.utils.GetSign(obj);
			this.$http
				.request({
					url: `/Marketing/GetUserCoupon`,
					method: 'get',
					data: obj
				})
				.then(res => {
					this.discountList = res.data.userCoupons;
					var arr = this.discountList;
					for (var i = 0; i < arr.length; i++) {
						if (arr[i].couponStatus == 0) {
							this.pending = true;
						} else if (arr[i].couponStatus == 2) {
							this.haveBeen = res.data.userCoupons;
							this.haveBeenUsed = true;
						} else if (arr[i].couponStatus == 3) {
							this.overdue = res.data.userCoupons;
							this.pastDue = true;
						}
						this.expiredTime = arr[i].expiredTime.split(' ');
					}
				})
				.catch(err => {
					console.log(err);
				});
		}
	}
};
</script>

<style scoped>
.body {
	width: 100%;
	height: 100%;
}
.content {
	width: 100%;
	background: linear-gradient(#00a0e9, #ffffff);
}
.bgc {
	width: 95%;
	margin: auto;
	height: 170rpx;
	margin-left: 20upx;
	padding-top: 20rpx;
	position: absolute;
}
.bgc image {
	width: 100%;
	height: 100%;
}
.discount {
	top: 50upx;
	width: 95%;
	margin: auto;
	display: flex;
	color: #ffd700;
	position: relative;
	justify-content: space-between;
}
.overdue {
	top: 50upx;
	width: 95%;
	margin: auto;
	display: flex;
	color: #a9a9a9;
	position: relative;
	justify-content: space-between;
}
.money {
	font-size: 25upx !important;
}
.couponMoeny {
	font-size: 35upx;
	margin-top: 30upx;
	margin-left: 66upx;
}
.particulars {
	margin-right: 100upx;
}
.minUseMoney {
	margin-top: 10upx;
	font-size: 25upx;
}
.without {
	margin-top: 50%;
	text-align: center;
}
</style>
